<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台登陆</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .main{
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background: url("static/images/login.png") no-repeat center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .main .form-div{
            width: 450px;
            padding: 30px 0;
            background-color: rgba(0,0,0,.4);
            border-radius: 20px;
        }
        .main .form-div h3{
            text-align: center;
        }
        .login-container{width: 320px; margin: 21px auto 0;}
        .layui-form-checkbox[lay-skin=primary]>div{
            color: #dfdfdf;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="form-div">
        <h3>后台登陆</h3>
        <form class="layui-form">
            <div class="login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-vercode"></i>
                                </div>
                                <input type="text" name="code" value="" id="code" lay-verify="required|code" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img style="height: 40px;width: 120px" src="kaptcha.jpg" id="kaptcha" title="点击切换验证码" onclick="this.src='kaptcha.jpg?t='+ new Date().getTime();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    $(function () {
        layui.use(function () {
            const form = layui.form;
            /*自定义检测*/
            form.verify({
                code(value){
                    if (value.length!==5){
                        return "验证码长度不为5"
                    }
                }
            })
            /*监听表单的提交事件，表单提交的时候,触发回调函数*/
            form.on("submit(login)",function (obj) {
                $.ajax({
                    url:"login",
                    method:"post",
                    data:obj.field,
                    dataType:"json",
                    success(res){
                        /*登录成功*/
                        if(res.code === 200){
                            /*弹窗显示登录成功*/
                            layer.msg('登录成功',{icon:6},function () {
                                /*跳转到home页面*/
                                location.replace("page?param=home")
                            });
                        }else{
                            /*弹窗警告*/
                            layer.alert(res.msg,{icon:5});
                            /*清空验证码内容*/
                            $("#code").val("")
                            /*刷新验证码*/
                            $("#kaptcha").prop("src","kaptcha.jpg?r="+Math.random())
                        }
                    }
                })
                /*阻止表单提交*/
                return false;
            });
        })
    })
</script>
</html>
